<template>
  <div class="login-container">
    <div class="login-operation">
      <div class="login-input">
        <van-form @submit="onSubmit">
          <van-cell-group inset>
            <van-field
              v-model="state.username"
              name="用户名"
              label="用户名"
              placeholder="用户名"
              :rules="[{ required: true, message: '请填写用户名' }]"
            />
            <van-field
              v-model="state.password"
              type="password"
              name="密码"
              label="密码"
              placeholder="密码"
              :rules="[{ required: true, message: '请填写密码' }]"
            />
          </van-cell-group>
          <div style="margin: 16px;">
            <van-button round block type="primary" native-type="submit">
              提交
            </van-button>
          </div>
        </van-form>
      </div>
    </div>
    <div class="logo">
      <img :src="Logo" alt="">
    </div>
  </div>
</template>
<script lang="ts">
import { Options, Vue } from 'vue-class-component'
import Logo from '@/assets/logo.png'

@Options({})
export default class Login extends Vue {
  Logo = Logo
  state = {
    username: '',
    password: ''
  }

  onSubmit (value: any): void {
    console.log('用户信息', this.state)
    console.log('router', this.$router)
    this.$router.push({
      path: '/workCenter'
    })
  }
}
</script>
<style lang="less">
.login-container {
  width: 100%;
  height: 100%;
  .login-operation {
    width: 100%;
    height: 400px;
  }
  .logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 50px;
    img {
      width: 50px;
      height: 50px;
    }
  }
}
</style>
